<template>
	<PageLayout title="我的AA">

		<view class="aa-list-box">
			<block v-for="(project,idx) in projectList" :key="'project-'+idx">
				<CardBox :title="project.name" :rightTitle="project.createdAt" :contentOption="cardContentOpt" 
				     :contentData="project" :actList="actList"/> 
			</block>
			
		</view>

		<view class="add-btn" @click="handlerAddAA">
			<view class="iconfont aa-plus"></view>
		</view>
	</PageLayout>
</template>

<script setup lang="jsx">
	import { ref,onMounted,getCurrentInstance } from 'vue';
	import PageLayout from '../components/myLayout/PageLayout.vue';
	import CardBox from '../components/CardBox.vue';
	import { DeleteProjectReq, ProjectGetReq, ProjectListReq } from '../http/project';
	import { useProjectStore } from '../store/projectStore';
	import {MyAlert} from "/utils/utils.ts"
	import {QuitProjectReq} from "../http/project"
	import { onShow } from '@dcloudio/uni-app'

	const projectStore=useProjectStore()

	const cardContentOpt=ref([
		{
			label:"发起人",
         	name:"creator_name",
		},
		{
			label:"参与人数",
         	name:"count"
		}
	])

	const actList=[
		{
			label:"进入",
			type:"primary",
			click: async (data)=>{
				const res=await ProjectGetReq({id:data.id})
				await projectStore.setProject(res.data)
				uni.navigateTo({
					url:"/pages/aaProject/index?id="+data.id,
					success:(e)=>{
						e.eventChannel.on("refersh",()=>{
							getProjectList()
						})
					}
				})
			}
		},
		{
			label:"退出",
			type:"error",
			click:async (data)=>{
				const confirm=await MyAlert({title:`是否退出项目:${data.name}`,content:`退出项目后无法查看到项目信息`})
				// if (!confirm) return
				// DeleteProjectReq({pid:data.id}).then(()=>{
				// 	MyAlert({title:"删除成功",content:"删除项目成功",showCancel:false}).finally(()=>{
				// 		getProjectList()
				// 	})
				// })
                if(confirm!==true) return
                QuitProjectReq({pid:data.id}).then(()=>{
                    getProjectList()
                })
			}
		},
	]

	const cardData={
		username:"RogerH",
		count:8
	}

	const projectList=ref([])

	const getProjectList=()=>{
		ProjectListReq({}).then(res=>{
			console.log(res)
			projectList.value=res.data.list

		})
	}

	const handlerAddAA=()=>{
		console.log("新建AA")
		uni.navigateTo({
			url:"/pages/aaProject/add"
		})
	}

	onShow(() => {
		getProjectList()
	})
	

</script>

<style lang="scss" scoped>
	@import "@/uni.scss";
	.act-box{
		display: flex;
		font-weight: bold;
		align-items: center;
		justify-content: space-around;
		.btn{
			
			width: 100%;
			text-align: center;
			border-top: 1px solid #c3bdbd;
			margin-top: 10px;
			view{
				margin-top: 10px;
				border-right: 1px solid #c3bdbd;
			}
			&:last-child view{
				border-right: 0px;
			}
		}
	}
	.card-box{
		background-color: #fff;
		width: 79%;
		margin: 0 auto;
		border-radius: 20upx;
		padding: 20upx;
		box-shadow: 0 0 8upx 0px #717070;
		margin-top: 20upx;
		font-size: 28upx;
		.title-box{
			display: flex;
			justify-content: space-between;
			color: #969696;	
			.title{
				font-weight: bold;
				color: #000;
			}
		}
		.content{
			display: flex;
			view{
				margin-right: 20upx;
			}
		}
	}
	.add-btn{
		background-color: #f8744d;
		color: #fff;
		position: fixed;
		bottom: 0;
		right: 0;
		margin: 60upx;
		text-align: center;
		border-radius: 50%;
		.iconfont{
			font-size: 60upx;
			font-weight: bold;
			padding: 13px;
		}
	}
</style>
